<template>
    <div class="button-example">
        <div class="button-row">
            <f-button :loading="loading" @click="openLoading">默认</f-button>
            <f-button :loading="loading" type="primary" @click="openLoading">Primary</f-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const loading = ref(false)
const openLoading = () => {
    loading.value = true

    setTimeout(() => {
        loading.value = false
    }, 2000)
}

</script>

<style lang="less" scoped>
.button-example {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .button-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    .button-row>* {
        margin: 0;
    }
}
</style>
